<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- CDN 在线Vue链接(服务器炸了) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->

    <!-- 本地下载 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ count }}</p>
        <p>{{ isLogin }}</p>
    </div>
</body>
<script>
    // 官方的
    // var vm = new Vue({
    //     el: "#app",  //挂载的元素  -> 将模板语法声明式的渲染到 #app 元素中
    //     data: { // 挂载的数据  ->  可以在挂载的元素中使用(范围)
    //         message: "Hello Vue!",
    //         count: 0,
    //         isLogin: true,
    //     }
    // });

    // 模拟实现

    class MyVue {
        constructor(options) {  // {el,data,methods}

            // options相关
            // el 选择器(设置挂载的元素)
            var { el, data, methods } = options;

            var ele = document.querySelector(el); //挂载的元素
            var template = ele.innerHTML; // 获取挂载的元素的html结构(需要将data中的数据拼接到模板中 -> 初识的模板)
            console.log(template);
            /* 
              <p>{{ message }}</p>
              <p>{{ count }}</p>
              <p>{{ isLogin }}</p>
            */


            // 实例相关
            // $el => 挂载的元素
            // $data => 挂载的数据
            this.$el = ele;
            this.$data = data;

            render();

            // 将data中的数据拼接到模板中  {{ }}
            /*
              初始的模板
              <p>{{ message }}</p>
              <p>{{ count }}</p>
              <p>{{ isLogin }}</p>

              替换后的内容
              <p>{{ Hello Vue }}</p>
              <p>{{ 0 }}</p>
              <p>{{ true }}</p>
            */
            function render() {
                var tempReg = /\{\{\s+.+\s+\}\}/g;

                // replace的用法
                // str.replace(reg|oldStr,newStr)
                // str.replace(reg,callback)  replace的第二参数可以是一个回调函数,回调函数有一个形式参数 表示需要被替换的字符串,根据回调函数的返回值得到新的字符串(用于替换的新字符串)

                // 根据初识的模板 替换 得到的新内容
                var html = template.replace(tempReg, function (oldStr) {
                    // oldStr  表示需要被替换的字符串(正则表达式匹配的内容   { { message } })  
                    // console.log(oldStr);


                    oldStr = oldStr.replace(/\s+/g, "");  //去除空格
                    // console.log(oldStr);

                    var key = oldStr.slice(2, -2);  // 截取 message
                    // console.log(key);

                    if (!data.hasOwnProperty(key)) {
                        var err = new Error(`Property or methods '${key}' is not defined on this instance!`)
                        throw err;
                    }

                    // 根据回调函数的返回值得到新的字符串(用于替换的新字符串)
                    return data[key];
                })
                console.log(html);

                ele.innerHTML = html;

            }




        }
    }

    // 正则匹配
    // var tempReg = /\{\{\s+(.+)\s+\}\}/g;
    // var str = `<p>{{ message }}</p>
    //           <p>{{ count }}</p>
    //           <p>{{ isLogin }}</p>`

    // console.log(tempReg.exec(str));
    // console.log(tempReg.exec(str));
    // console.log(tempReg.exec(str));


    // 声明式渲染
    var vm = new MyVue({
        el: "#app",  //挂载的元素  -> 将模板语法声明式的渲染到 #app 元素中
        data: { // 挂载的数据  ->  可以在挂载的元素中使用(范围)
            message: "Hello Vue!",
            count: 0,
            isLogin: true,
        }
    });



</script>

</html>